from nicegui import ui, app, context
from starlette.routing import Route

from typing import Literal
from common import TemplatePage
from typing import cast


class BasePage(
    TemplatePage[Literal["header", "left_drawer", "right_drawer", "footer", "body"]]
):
    pass


def base_page():
    with ui.header(elevated=True).style("background-color: #3874c8").classes(
        "items-center justify-between"
    ):
        with ui.row() as header:
            ui.label("base 模板页面")
        ui.button(on_click=lambda: right_drawer.toggle(), icon="menu").props(
            "flat color=white"
        )
    with ui.left_drawer(top_corner=True, bottom_corner=True).style(
        "background-color: #d7e3f4"
    ) as left_drawer:
        ui.label("LEFT DRAWER")
        ui.label('看看我!!!在左边')
        ui.button('点击显示在左边',on_click=lambda :ui.notify('在左边'))
        ui.button('前往index',on_click=lambda :ui.open("/index"))

    with ui.right_drawer(fixed=False).style("background-color: #ebf1fa").props(
        "bordered"
    ) as right_drawer:
        ui.label("RIGHT DRAWER")
        ui.label('看看我!!!在右边')
        ui.button('点击显示在右边',on_click=lambda :ui.notify('在右边'))


    with ui.footer().style("background-color: #3874c8") as footer:
        ui.label("FOOTER")

    # 因为这是基础模板，可能会在不同的路由下被执行
    # 希望只要在 非根路由 函数执行，就显示返回根的link
    if context.get_client().page.path != "/":
        ui.link("返回 base", target="/")

    with ui.column() as body:
        ui.label("base模板页面 + index从base继承 + produce从index继承")

        # 列出有用的路由页面link，注意要排除根路由
        for r in app.routes:
            route = cast(Route, r)
            if route.name == "decorated" and route.path != "/":
                ui.link(f"跳转到{route.path[1:]}", route.path)

    return BasePage(
        header=header,
        left_drawer=left_drawer,
        right_drawer=right_drawer,
        footer=footer,
        body=body,
    )
